<template>
  <!--toRefs,toRef可用可不用 不用就这样写{{obj.name}} {{obj.age}} -->
  <span>{{ name }}</span>
  <span>{{ age }}</span>
  <span>{{ toRefAge }}</span>
  <div>
    <button @click="handleParentClick">我是父组件</button>
  </div>
  <span>{{ tem }}</span>
  <child
    ref="parent"
    :objchild="objchild"
    @parentClick="parentClick"
    :chilsd="chilsd"
  ></child>
  <div>
    {{ selected }}
  </div>
</template>

<script setup>
import { ref, reactive, toRefs, toRef, readonly } from "vue";
import child from "./child.vue";
const obj = reactive({
  name: "xiaoming",
  age: 18,
});
const chilsd = ref(400);
const objchild = readonly(obj);
let { name, age } = toRefs(obj);
let toRefAge = toRef(obj, "age");
const parent = ref(null); //parent.value获取子组件的实例
const handleParentClick = () => {
  // name.value = "xiaoyang";
  // age.value = 20;
  // console.log(parent.value,78941000); //获取子组件的值
  chilsd.value++;
  console.log(parent.value, 71000);
  parent.value.content = "修改子组件111111111111111"; //父组件修改子组件的值
  // parent.value.handleChildClick(); //父组件调用子组件的方法
  parent.value.age = 600;
};
const tem = ref("");
const parentClick = (value) => {
  tem.value = value;
};

const selected = ref(100);
defineExpose({
  selected,
});
</script>

<style scoped></style>
